<template>
  <div class="person-box">
    <cardPanel title="重点人员">
      <ul class="person-content">
        <li v-for="(item, index) in personList" :key="index">
          <span class="icon-box">
            <img :src="item.icon" />
          </span>
          <div class="person-info">
            <label>{{ item.label }}</label>
            <p>
              <i>{{ item.num }}</i
              >个
            </p>
          </div>
        </li>
      </ul>
    </cardPanel>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onUnmounted } from "vue";
// 重点人员
import cardPanel from "@/components/cardPanel/index.vue";
import icon1 from "@/assets/image/network/icon1.png";
import icon2 from "@/assets/image/network/icon2.png";
import icon3 from "@/assets/image/network/icon3.png";
import icon4 from "@/assets/image/network/icon4.png";
import icon5 from "@/assets/image/network/icon5.png";
import icon6 from "@/assets/image/network/icon6.png";
import icon7 from "@/assets/image/network/icon7.png";
import icon8 from "@/assets/image/network/icon8.png";
import icon9 from "@/assets/image/network/icon9.png";
import icon10 from "@/assets/image/network/icon10.png";
import areaData from "@/assets/json/area.json";
import { overviewStore } from "@/stores/overview";

const store = overviewStore();

const personList = ref([
  {
    label: "邪教人员",
    num: 0,
    icon: icon1,
  },
  {
    label: "吸毒人员",
    num: 0,
    icon: icon2,
  },
  {
    label: "涉军人员",
    num: 0,
    icon: icon3,
  },
  {
    label: "上访人员",
    num: 0,
    icon: icon4,
  },
  {
    label: "刑满释放人员",
    num: 0,
    icon: icon5,
  },
  {
    label: "孤老病残人员",
    num: 0,
    icon: icon6,
  },
  {
    label: "失独人员",
    num: 0,
    icon: icon7,
  },
  {
    label: "社区矫正人员",
    num: 0,
    icon: icon8,
  },
  {
    label: "精神障碍人员",
    num: 0,
    icon: icon9,
  },
]);

const setVillageInfo = (data: any) => {
  let allData: any = {
    邪教人员: 0,
    吸毒人员: 0,
    涉军人员: 0,
    上访人员: 0,
    刑满释放人员: 0,
    孤老病残人员: 0,
    失独人员: 0,
    社区矫正人员: 0,
    精神障碍人员: 0,
  };
  allData["邪教人员"] =
    data["邪教人员"] === ""
      ? Number(parseInt(Math.random() * 10 + ""))
      : Number(data["邪教人员"].substring(0, data["邪教人员"].length - 1));
  allData["吸毒人员"] =
    data["吸毒人员"] === ""
      ? Number(parseInt(Math.random() * 10 + ""))
      : Number(data["吸毒人员"].substring(0, data["吸毒人员"].length - 1));
  allData["涉军人员"] =
    data["涉军人员"] === ""
      ? Number(parseInt(Math.random() * 10 + ""))
      : Number(data["涉军人员"].substring(0, data["涉军人员"].length - 1));
  allData["上访人员"] =
    data["上访人员"] === ""
      ? Number(parseInt(Math.random() * 10 + ""))
      : Number(data["上访人员"].substring(0, data["上访人员"].length - 1));
  allData["刑满释放人员"] =
    data["刑满释放人员"] === ""
      ? Number(parseInt(Math.random() * 10 + ""))
      : Number(
          data["刑满释放人员"].substring(0, data["刑满释放人员"].length - 1)
        );
  allData["孤老病残人员"] =
    data["孤老病残人员"] === ""
      ? Number(parseInt(Math.random() * 10 + ""))
      : Number(
          data["孤老病残人员"].substring(0, data["孤老病残人员"].length - 1)
        );
  allData["失独人员"] =
    data["失独人员"] === ""
      ? Number(parseInt(Math.random() * 10 + ""))
      : Number(data["失独人员"].substring(0, data["失独人员"].length - 1));
  allData["社区矫正人员"] =
    data["社区矫正人员"] === ""
      ? Number(parseInt(Math.random() * 10 + ""))
      : Number(
          data["社区矫正人员"].substring(0, data["社区矫正人员"].length - 1)
        );
  allData["精神障碍人员"] +=
    data["精神障碍人员"] === ""
      ? Number(parseInt(Math.random() * 10 + ""))
      : Number(
          data["精神障碍人员"].substring(0, data["精神障碍人员"].length - 1)
        );

  return allData;
};

watch(
  () => store.villageInfo,
  (val: any) => {
    let allData: any = {
      邪教人员: 0,
      吸毒人员: 0,
      涉军人员: 0,
      上访人员: 0,
      刑满释放人员: 0,
      孤老病残人员: 0,
      失独人员: 0,
      社区矫正人员: 0,
      精神障碍人员: 0,
    };
    if (JSON.stringify(val) == "{}") {
      const { features } = areaData;
      features.forEach((item: any) => {
        const { properties } = item;
        const { attr } = properties;
        const info = attr["小区概况"];
        const importPerson = info["重点人群"];
        const tempInfo = setVillageInfo(importPerson);
        allData["邪教人员"] += tempInfo['邪教人员'];
        allData["吸毒人员"] += tempInfo['吸毒人员'];
        allData["涉军人员"] += tempInfo['涉军人员'];
        allData["上访人员"] += tempInfo['上访人员'];
        allData["刑满释放人员"] += tempInfo['刑满释放人员'];
        allData["孤老病残人员"] += tempInfo['孤老病残人员'];
        allData["失独人员"] += tempInfo['失独人员'];
        allData["社区矫正人员"] += tempInfo['社区矫正人员'];
        allData["精神障碍人员"] += tempInfo['精神障碍人员'];
      });
    } else {
      allData = setVillageInfo(val);
    }

    personList.value.forEach((item: any) => {
      item.num = allData[item.label];
    });
  },
  {
    immediate: true,
    deep: true,
  }
);

onUnmounted(() => {
  store.villageInfo = {};
})
</script>

<style lang="scss" scoped>
.person-box {
  width: 360px;
  height: 340px;
  margin-bottom: 10px;
}
.person-content {
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  li {
    position: relative;
    width: 48%;
    height: 32px;
  }
}
.icon-box {
  width: 100%;
  height: 100%;
  display: flex;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.person-info {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  label {
    width: 85px;
    // margin-right: 25px;
  }
  i {
    font-family: Alibaba PuHuiTi, serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    color: #47e8fe;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>
